﻿<%@ Page Language="C#" MasterPageFile="~/WebShop.master" AutoEventWireup="true" CodeFile="ProductDetail_temp.aspx.cs"
    Inherits="Shopping_Stall_ProductDetail_temp" Title="Untitled Page" %>

<%@ Register Src="../../Pub/Module/ProductComment.ascx" TagName="ProductComment"
    TagPrefix="uc3" %>
<%@ Register Src="../../Pub/Module/ProductImages.ascx" TagName="ProductImages" TagPrefix="uc1" %>
<%@ Register Src="../../Pub/Module/SameCatProduct.ascx" TagName="SameCatProduct"
    TagPrefix="uc2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <link href="../../Pub/Css/jqzoom.css" rel="stylesheet" type="text/css" />

    <script src="../../Pub/Js/jquery.js" type="text/javascript"></script>

    <script src="../../Pub/Js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

    <script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;	  
      });
    });  
  });
 


$(function() {
        var options = {
                zoomType:'standard',        
	            zoomWidth: 300,
	            zoomHeight: 250,
                xOffset: 10,
                yOffset: 0,
                imageOpacity:1,
                position: "right" //and MORE OPTIONS
        };
	        $(".jqzoom").jqzoom(options);


	//$(".jqzoom").jqzoom();
});

  
    </script>

    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="tbl_News">
        <tr>
            <td>
                <table border="0" width="100%" cellpadding="0" cellspacing="0">
                    <tr>
                        <td class="td_Left_TitileNews">
                        </td>
                        <td class="td_Middle_TitileNews">
                        </td>
                        <td class="td_Right_TitileNews">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_Content_Left_590">
                        </td>
                        <td>
                            <table width="100%" class="tbl_ContentNews" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td align="center" height="45px" valign="middle">
                                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                            <tr>
                                                <td class="td_Middle_L">
                                                </td>
                                                <td class="td_Middle_C" align="center">
                                                    <asp:Label ID="lblKind" runat="server" CssClass="lbl_TitileNews_590"></asp:Label>
                                                </td>
                                                <td class="td_Middle_R">
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
                                            <tr>
                                                <td class="td_ContentNews">
                                                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
                                                        <tr>
                                                            <td align="left" class="td_CoverProductDetail" style="padding-top: 10px">
                                                                <table border="0" cellpadding="2" cellspacing="0" class="tbl_ProductDetail">
                                                                    <tr>
                                                                        <td colspan="1" align="left" style="padding-bottom: 5px">
                                                                            <a runat="server" id='zoom1' class="jqzoom" style="">
                                                                                <img align="left" border="0" class="img_ProductDetail" height="130" width="180" runat="server"
                                                                                    id="imgDetail" /></a>
                                                                        </td>
                                                                        <td colspan="2" class="td_PropertyProductDetail" valign="top">
                                                                            <table border="0" cellpadding="0" cellspacing="0">
                                                                                <tr>
                                                                                    <td>
                                                                                        <asp:Label ID="lblTenSP" runat="server" CssClass="lbl_MostTitleProduct" Font-Bold="True"
                                                                                            Font-Size="14px"></asp:Label></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>
                                                                                        &nbsp;</td>
                                                                                </tr>
                                                                                <tr id="trBaoHanh" runat="server">
                                                                                    <td>
                                                                                        <asp:Label ID="Label3" runat="server" CssClass="lbl_TitlePrice" Text="Bảo hành: "></asp:Label>
                                                                                        <asp:Label ID="lblWarranty" runat="server" CssClass="lbl_PriceDetailD"></asp:Label>
                                                                                        <asp:Label ID="Label3434" runat="server" CssClass="lbl_TitlePrice" Text="Tháng"></asp:Label>
                                                                                        <asp:Label ID="lblKindNo" runat="server" Text="" Visible="false"></asp:Label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr id="trGiaThamKhao" runat="server">
                                                                                    <td id="tdPrice" runat="server">
                                                                                        <asp:Label ID="Label1" runat="server" CssClass="lbl_TitlePrice" Text="Giá: "></asp:Label>
                                                                                        <asp:Label ID="lblDongia" runat="server" CssClass="lbl_Price"></asp:Label>
                                                                                        <asp:Label ID="lblRate" runat="server" CssClass="lbl_Price" ForeColor="Navy"></asp:Label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr id="trSaleOf" runat="server" visible="false">
                                                                                    <td>
                                                                                        <asp:Label ID="Label222" runat="server" CssClass="lbl_TitlePrice" Text="Chỉ còn: "></asp:Label>
                                                                                        <asp:Label ID="lblDiscountPrice" runat="server" CssClass="lbl_Price" Text=''></asp:Label>
                                                                                        <asp:Label ID="lblDiscountRate" runat="server" CssClass="lbl_Rate" Text='' ForeColor="Navy"
                                                                                            Font-Size="13px"></asp:Label>
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>
                                                                                        <asp:Label ID="Label10" runat="server" Font-Bold="True" Text="Số lượng:" CssClass="lbl_TitlePrice"></asp:Label>
                                                                                        <asp:TextBox ID="txtQuantity" runat="server" MaxLength="2" Style="vertical-align: middle;
                                                                                            text-align: center" Width="40px" BorderColor="DarkSlateBlue" BorderStyle="Solid"
                                                                                            BorderWidth="1px" ForeColor="blue">1</asp:TextBox></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>
                                                                                        &nbsp;
                                                                                    </td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>
                                                                                        <asp:ImageButton ID="ImgGioHang" runat="server" ImageUrl="~/Images/Icon/btnDetail.png"
                                                                                            OnClick="ImgGioHang_Click" CausesValidation="false" /></td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                    <tr style="color: #666666">
                                                                        <td align="right" colspan="3">
                                                                            &nbsp;</td>
                                                                    </tr>
                                                                    <tr style="color: #666666">
                                                                        <td align="left" colspan="3">
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
                                                        <tr>
                                                            <td>
                                                                <table border="0" cellpadding="2" cellspacing="0" style="width: 100%">
                                                                    <tr>
                                                                        <td align="left">
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td style="padding-left: 2px; white-space: normal; padding-right: 2px;" align="left">
                                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                                <tr>
                                                                                    <td>
                                                                                        <div class="tab-box">
                                                                                            <a href="javascript:;" class="tabLink activeLink" id="cont-1" onmouseout="fnTabLinkOut(this)"
                                                                                                onmouseover="fnTabLinkOver(this)" onclick="fnIndexTag(this)">Chi tiết sản phẩm</a>
                                                                                            <a href="javascript:;" class="tabLink " onclick="fnIndexTag(this)" id="cont-2" onmouseout="fnTabLinkOut(this)"
                                                                                                onmouseover="fnTabLinkOver(this)">Hình ảnh(<asp:Label ID="lblCTagImg" runat="server"
                                                                                                    Text="0"></asp:Label>)</a> <a href="javascript:;" class="tabLink " onclick="fnIndexTag(this)"
                                                                                                        id="cont-3" onmouseout="fnTabLinkOut(this)" onmouseover="fnTabLinkOver(this)">Nhận
                                                                                                        xét(<asp:Label ID="lblCTagComment" runat="server" Text="0"></asp:Label>)</a>
                                                                                            <a href="javascript:;" class="tabLink " onclick="fnIndexTag(this)" id="cont-4" onmouseout="fnTabLinkOut(this)"
                                                                                                onmouseover="fnTabLinkOver(this)">Sản phẩm tương tự(<asp:Label ID="lblCTagPD" runat="server"
                                                                                                    Text="0"></asp:Label>)</a>
                                                                                        </div>
                                                                                        <div class="tabcontent" id="cont-1-1">
                                                                                            <asp:Label ID="lblThongSo" runat="server" CssClass="lbl_Property-BigSizeBoldD" ForeColor="Green">Thông tin cơ bản</asp:Label><br />
                                                                                            <asp:Label ID="lblThuocTinh" runat="server" CssClass="lbl_PriceDetailD"></asp:Label>
                                                                                            <br />
                                                                                            <asp:Label ID="Label4" runat="server" CssClass="lbl_Property-BigSizeBoldD" ForeColor="Green">Chi tiết sản phẩm</asp:Label><br />
                                                                                            <asp:Label ID="lblDescript" runat="server" CssClass="lbl_PriceDetailD"></asp:Label>
                                                                                        </div>
                                                                                        <div class="tabcontent hide" id="cont-2-1">
                                                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                                                <tr>
                                                                                                    <td align="center">
                                                                                                        <uc1:ProductImages ID="ProductImages1" runat="server" />
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </table>
                                                                                        </div>
                                                                                        <div class="tabcontent hide" id="cont-3-1">
                                                                                            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                                                                                                <tr>
                                                                                                    <td align="center">
                                                                                                        <uc3:ProductComment ID="ProductComment1" runat="server" />
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </table>
                                                                                        </div>
                                                                                        <div class="tabcontent hide" id="cont-4-1">
                                                                                            <uc2:SameCatProduct ID="SameCatProduct1" runat="server" />
                                                                                        </div>
                                                                                    </td>
                                                                                </tr>
                                                                            </table>
                                                                        </td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td align="right">
                                                                <table border="0" cellpadding="0" cellspacing="0">
                                                                    <tr>
                                                                        <td nowrap="nowrap" valign="middle">
                                                                            <a href='javascript:history.go(-1)' style="text-decoration: none; color: #14746E;
                                                                                font-family: Verdana; font-size: 10pt">
                                                                                <asp:Label ID="Label2" runat="server" CssClass="lbl_News">&lt;&lt;Quay lại</asp:Label></a></td>
                                                                    </tr>
                                                                </table>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <br />
                                                    <br />
                                                    &nbsp;</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class="td_Content_Right_590">
                        </td>
                    </tr>
                    <tr>
                        <td class="td_Bottom_Left_TitileNews">
                        </td>
                        <td class="td_Bottom_Middle_TitileNews">
                        </td>
                        <td class="td_Bottom_Right_TitileNews">
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <div class='product_popup' id="divTooltip" onmouseover="OpenDivPopUpTooltip()" onmouseout="HidePopUpTooltip()"
        onclick="HidePopUpTooltip()" style="cursor: pointer">
        <table class="tbl_popup" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table border="0" cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td class="td_Middle_L_Pop">
                            </td>
                            <td class="td_Middle_C_Pop" align="left" id="tdProductTitle">
                            </td>
                            <td class="td_Middle_R_Pop">
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td nowrap="nowrap" rowspan="2" class="product_detail_popup" id="tdProductDetail"
                    style="text-align: center">
                </td>
            </tr>
        </table>
    </div>
    <input type="hidden" value="" runat="server" id="hIndexTag" />

    <script language="javascript" type="text/javascript" src="../../Pub/Js/cloud-zoom.1.0.2.js"></script>

    <script language="javascript" type="text/javascript">
    
    
    </script>

    <script language="javascript" type="text/javascript">
    try{
    window.onload=FindIndex();
    }
    catch(e){}
   function FindIndex()
   {
        var hIndexTag=document.getElementById("<%= hIndexTag.ClientID%>");        
        if(hIndexTag.value!="")
        {
            for(var i=1;i<=4;i++)
            {
                var divObj=document.getElementById("cont-"+i);
               var divCObj =document.getElementById("cont-"+i+"-1");
                 divObj.className="tabLink";
                 divCObj.className="tabcontent hide";
            }
            var divObj=document.getElementById(hIndexTag.value);
            var divCObj=document.getElementById(hIndexTag.value+"-1"); 
            divObj.className="tabLink activeLink";
           divCObj.className="tabcontent"; 
        }
    }
    
    
    function fnIndexTag(obj)
    {
        var hIndexTag=document.getElementById("<%= hIndexTag.ClientID %>");
        hIndexTag.value=obj.id;       
    }
    function fnTabLinkOut(obj)
    {
        obj.style.color="#666666";
        
    }
     function fnTabLinkOver(obj)
    {
        obj.style.color="green";

    }
    function OpenPopUpTooltip(obj)
     {      
       var tdProductDetail=document.getElementById("tdProductDetail");    
       var tdProductTitle=document.getElementById("tdProductTitle");           
       var divTooltip=document.getElementById("divTooltip");
       divTooltip.style.visibility="visible" ;
       var sleft=ObjectPosition(obj)[0];      
       var stop=ObjectPosition(obj)[1]-(divTooltip.clientHeight/2); 
       divTooltip.style.left = sleft-obj.clientWidth + 'px';
       divTooltip.style.top =  stop-obj.clientHeight+ 'px';  
      // tdProductDetail.innerHTML="<div style='padding:200 200 200 200'><img src='http://localhost:1038/WebShop/Images/Icon/loadingPD.gif' border='0'></div>";
    
       var sSrc=obj.src;

	   var Index=parseInt(sSrc.lastIndexOf("/"));
	   var iLength=parseInt(sSrc.length);
	   var filename=sSrc.substr(Index+1,iLength);

       if(filename=='Noimages.gif')
       {
            divTooltip.style.visibility="hidden" ;
            return;
       }
      var  sTenSP=obj.getAttribute("TenSP");
       if(!sTenSP)              
             var sTenSP=document.getElementById("<%=lblTenSP.ClientID %>").innerHTML;          
       tdProductTitle.innerHTML=sTenSP; 
       var img="<img src="+sSrc+">"  
       tdProductDetail.innerHTML=img;
      //var img="<img src="+sSrc+" width="+sWidth+" height="+sHeight+">"       
     }
     function OpenEventPopUpTooltip(e,lbl)
     { 
    
       obj=lbl.nextSibling ;
       var sSrc=obj.src;       
       var divTooltip=document.getElementById("divTooltip");
        divTooltip.style.visibility="visible" ;    
       var sleft=ObjectPosition(obj)[0];    
        var stop=ObjectPosition(obj)[1]-(divTooltip.clientHeight/2);        
      // var stop=ObjectPosition(obj)[1]-100;   
    //alert(clientHeight)
    //alert(obj.clientHeight);
       
	   var Index=parseInt(sSrc.lastIndexOf("/"));
	   var iLength=parseInt(sSrc.length);
	   var filename=sSrc.substr(Index+1,iLength);

       if(filename=='Noimages.gif')
       {
            divTooltip.style.visibility="hidden" ;
            return;
       }

        var tdProductDetail=document.getElementById("tdProductDetail");    
        var tdProductTitle=document.getElementById("tdProductTitle");           
              
        
      	var st = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
		if(navigator.userAgent.toLowerCase().indexOf('safari')>=0)st=0; 
	
		var leftPos = e.clientX + 20;
		if(leftPos<0)leftPos = 0;
        divTooltip.style.left = leftPos + 'px';
        divTooltip.style.top =  stop+ 'px';    
       // divTooltip.style.top = e.clientY + 'px';
             
        
        tdProductTitle.innerHTML=lbl.innerHTML;
       // var img="<img src="+sSrc+" width="+sWidth+" height="+sHeight+">"  
        var img="<img src="+sSrc+">";
        
        tdProductDetail.innerHTML=img;
        //divTooltip.style.top = e.clientY - obj.offsetHeight- (divTooltip.clientHeight/2) + st + 'px';
     }    
     
     function HidePopUpTooltip()
     { 
             var divTooltip=document.getElementById("divTooltip");
             divTooltip.style.visibility="hidden"
     }
     
     function OpenDivPopUpTooltip()
     { 
             var divTooltip=document.getElementById("divTooltip");
             divTooltip.style.visibility="visible"
     }     
     
     function ObjectPosition(obj) 
     {
          var curleft = 0;
          var curtop = 0;
          if (obj.offsetParent) {
                do {
                      curleft += obj.offsetLeft;
                      curtop += obj.offsetTop;
                } while (obj = obj.offsetParent);
          }
          return [curleft,curtop];
	}
     
    </script>

</asp:Content>
